<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap表单样式 基础、内联、横向</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

</head>
<!-- 表单样式 ， 表单基础，内联表单，横向表单-->
<body>
<!-- 表单样式 -->
<!--  style="border:1px #2b669a solid" -->
<div class="container">
    <form action="#" method="post">
        <!-- fieldset :html5的标签，就是用于分组，显示明确，但是在某些时候，这个标签的效果没有显示出来 -->
        <!-- 如果fieldset里面用属性 disabled 表单中的所有全被禁用 -->
        text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
        <legend>用户登录</legend>

        <a class="h1">按钮</a><br/>
        <a class="h4">可作为按钮使用的标签或元素,但是，导航和导航条组件只支持 button 元素。</a>
        跨浏览器展现
        我们总结的最佳实践是：强烈建议尽可能使用
        button 元素来获得在各个浏览器上获得相匹配的绘制效果。
        <br/>
        另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于 input 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox
        浏览器上不能完全和其他按钮保持一致的高度。
        <a class="btn btn-default" href="#" role="button">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
        <h1>预定义样式</h1>
        <button type="button" class="btn btn-default">（默认样式）Default</button>
        <button type="button" class="btn btn-primary">（首选项）Primary</button>
        <button type="button" class="btn btn-success">（成功）Success</button>
        <button type="button" class="btn btn-info">（一般信息）Info</button>
        <button type="button" class="btn btn-warning">（警告）Warning</button>
        <button type="button" class="btn btn-danger">（危险）Danger</button>
        <button type="button" class="btn btn-link">（链接）Link</button>
        <h1>尺寸</h1>
        <p>
            <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
            <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
            <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
            <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
            <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
        </p>
        <p class="bg-success h2">JAJAJA</p>
        <p class="bg-danger h2">JAJAJA</p>
        辅助样式：<br/>
        X号的2种方法：<br/>
        <button type="button" class="close" aria-label="Close"><span class="bg-danger" aria-hidden="true">&times;haha</span></button>
        <a href="#" class="close">&times;</a>

    </form>
</div>
</body>
</html>